<html lang="ch">

<head>
    <title></title>
</head>

<body>
<video id="video" autoplay="" style='width:640px;height:480px'></video>
<button id='picture'>PICTURE</button>
<canvas id="canvas" width="750" height="1200"></canvas>
</body>
<script type="text/javascript">
var video = document.getElementById("video");
var context = canvas.getContext("2d")
var errocb = function () {
  console.log('sth wrong!');
  alert('sth wrong!')
}

try {

  if (navigator.getUserMedia) { // 标准的API
    navigator.getUserMedia({
      "video": true
    }, function (stream) {
      console.log(stream)
      video.srcObject = stream;
      video.play();
    }, errocb);
  } else if (navigator.webkitGetUserMedia) { //WebKit 核心的API
    navigator.webkitGetUserMedia({
      "video": true
    }, function (stream) {
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errocb);
  } else if (navigator?.mediaDevices?.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(
      (stream) => {
        this.recorder = new window.MediaRecorder(stream)
        video.srcObject = stream;
      },
      (error) => {
        alert("出错，请确保已允许浏览器获取音视频权限");
      }
    );
  }
} catch (e) {
  alert(e)
}
document.getElementById("picture").addEventListener("click", function () {
  context.drawImage(video, 0, 0, 750, 1200);
});
</script>
